/**
  * Whirl
  *
  * @author jh3y
*/

$color: var(--primary);
$size: 30px;

@keyframes whirl {
  0% {
    transform: scale(0) rotate(-45deg) translateY(0);
  }
  50% {
    transform: scale(1.25) rotate(960deg) translateY(100%);
  }
  100% {
    transform: scale(0) rotate(2000deg) translateY(0);
  }
}

.whirl:before {
  animation: whirl 2s infinite linear;
  background-color: $color;
  border-radius: 100%;
  content: '';
  height: $size;
  width: $size;
}
